<template>
  <el-dialog v-model="visible" title="选择商品" width="1200px">
    <div style="display: flex; align-items: center; gap: 10px">
      <el-input v-model="query.search" placeholder="请输入商品名称" prefix-icon="search" />
      <el-button type="primary" @click="fetchGoodsList">搜索</el-button>
    </div>
    <div class="card-box">
      <el-table ref="tableRef" :data="list" @select-all="handleSelectAll" @select="handleSelect">
        <el-table-column type="selection" width="55" />
        <el-table-column label="名称" prop="name" />
        <el-table-column label="图片">
          <template #default="{ row }">
            <el-image :src="row.image_url" style="width: 50px; height: 50px" />
          </template>
        </el-table-column>
        <el-table-column label="库存" prop="stock" />
      </el-table>
      <div style="margin-top: 20px" />
      <el-pagination
        v-model:current-page="query.page"
        v-model:page-size="query.size"
        :total="total"
        @change="fetchGoodsList"
      />
    </div>
    <el-button style="width: 100%" type="primary" @click="handleConfirm">确认</el-button>
  </el-dialog>
</template>

<script setup lang="ts">
import GoodsAPI from "@/api/goods/goods";
import { useUserStoreHook } from "@/store/modules/user";

const userStore = useUserStoreHook();

const visible = defineModel({ type: Boolean });

const props = defineProps({
  selectList: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(["confirm"]);

const query = reactive({
  page: 1,
  size: 10,
  supplier__in: (userStore.supplierInfo as any).id,
  search: "",
});

const tableRef = ref();

const list = ref<any>([]);

const total = ref<any>(0);

const selectGoods = ref<any>([]);

watch(visible, (val) => {
  if (val) {
    fetchGoodsList();
  }
});

async function fetchGoodsList() {
  const response: any = await GoodsAPI.getPage(query);
  if (response) {
    list.value = response.records;
    total.value = response.total_count;
    await nextTick();
    const selectGoodsIds = selectGoods.value.map((item: any) => item.id);
    list.value.forEach((item: any) => {
      if (selectGoodsIds.includes(item.id)) {
        tableRef.value.toggleRowSelection(item, true);
      }
    });
  }
}

function handleSelectAll(selection: any[]) {
  if (selection.length) {
    list.value.forEach((item: any) => {
      if (selectGoods.value.indexOf(item) == -1) {
        selectGoods.value.push(item);
      }
    });
  } else {
    list.value.forEach((item: any) => {
      selectGoods.value.splice(selectGoods.value.indexOf(item), 1);
    });
  }
}

function handleSelect(rows: any[], row: any) {
  const selectGoodsIds = selectGoods.value.map((item: any) => item.id);
  if (rows.length) {
    rows.forEach((item: any) => {
      if (!selectGoodsIds.includes(item.id)) {
        selectGoods.value.push(item);
      } else {
        selectGoods.value.splice(selectGoods.value.indexOf(item), 1);
      }
    });
  } else {
    selectGoods.value.forEach((item: any, index: number) => {
      if (item.id === row.id) {
        selectGoods.value.splice(index, 1);
      }
    });
  }
}

function handleConfirm() {
  emits("confirm", selectGoods.value);
  visible.value = false;
}
</script>

<style scoped lang="scss"></style>
